<template>
    <div class="userid-login">
        <div class="userid-login-top border">
            <div class="ul-t-left" @click="goToLogin()">&lt; 登录</div>
            <div class="ul-t-center">注册</div>
        </div>
        <div class="userid-login-content">
            <div class="ul-c-top">
                <div class="ul-c-t-userid w100 center">
                    <el-input type="text" class="user_input border" placeholder="账号" v-model="userInput.userId"
                    autocomplete="new-password"></el-input>
                </div>
                <div class="ul-c-t-password w100 center">
                    <el-input type="password" class="user_input border" placeholder="密码" v-model="userInput.password"
                    autocomplete="new-password" show-password></el-input>
                </div>
                <div class="ul-c-t-password w100 center">
                    <el-input type="password" class="user_input border" placeholder="确认密码" v-model="userInput.confirmPassword"
                    autocomplete="new-password" show-password></el-input>
                </div>
                <div class="ul-c-t-loginBtn w100 center">
                    <button class="btn user_btn" @click="register()">注册</button>
                </div>
                <div class="ul-c-t-agreement p_color">
                    <input type="checkbox" class="ul-c-t_checkbox" v-model="userInput.agree">同意
                    <a>服务协议</a> 和 <a>隐私政策</a>
                </div>
            </div>
        </div>
    </div>
    <error-alert :message="errorMessage" ref="showErrorAlert"></error-alert>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { IUserIdAndPwdModel } from '../user.model'
import registerStore from './register.store'
import overallStore from '@/store/index'
// import ErrorAlert from '@/components/error-alert.vue'

const registerSe = registerStore()
const overallSe = overallStore()
const router = useRouter()
const goToLogin = () => {
    router.replace({
        name: 'userIdLogin'
    })
}

const userInput = reactive({
    userId: '',
    password: '',
    confirmPassword: '',
    agree: false
}) as IUserIdAndPwdModel

// 校验用户输入是否正确
let isUserIdMeetVerification = ref<boolean>(false)
let isPwdMeetVerification = ref<boolean>(false)
const VerifyUserInput = () => {
    let regx1 = /^(?=.*\d)(?=.*[a-zA-Z])[\da-zA-Z~!@#$%^&*]{8,20}$/i
    let regx2 = /^\S*(?=\S{8,20})(?=\S*\d)(?=\S*[A-Za-z])(?=\S*[!@#$%^&*? ])\S*$/i
    regx1.test(userInput.userId) ? isUserIdMeetVerification.value = true : isUserIdMeetVerification.value = false
    regx2.test(userInput.password) ? isPwdMeetVerification.value = true : isPwdMeetVerification.value = false
}

// 点击注册按钮
let errorMessage = ref<string>('')
let showErrorAlert = ref<any>(null)
const register = () => {
    if(userInput.userId == '' || userInput.password == '' || userInput.confirmPassword == '') {
        errorMessage.value = '请输入账号或密码'
        showErrorAlert.value.showErrorAlert()
        return
    }

    VerifyUserInput()
    if(!isUserIdMeetVerification.value) {
        // 账号不符合规范
        errorMessage.value = '账号必须包含8-20位字母、数字，可输入特殊字符'
        showErrorAlert.value.showErrorAlert()
        return
    }
    if(!isPwdMeetVerification.value) {
        // 密码不符合规范 
        errorMessage.value = '密码必须包含8-20位字母、数字和特殊字符，但不能和账号相同'
        showErrorAlert.value.showErrorAlert()
        return
    }
    if(userInput.userId == userInput.password) {
        // 账号和密码相同
        errorMessage.value = '密码不能和账号相同'
        showErrorAlert.value.showErrorAlert()
        return
    }
    if(userInput.confirmPassword != userInput.password) {
        // 账号和密码相同
        errorMessage.value = '确认密码与密码不符'
        showErrorAlert.value.showErrorAlert()
        return
    }
    if(!userInput.agree) {
        errorMessage.value = '请勾选同意服务协议和隐私政策'
        showErrorAlert.value.showErrorAlert()
        return
    }

    // 发起注册请求
    const data = {
        userType: 'U',
        userId: userInput.userId,
        password: userInput.password
    }
    registerSe.getRegister(data).then((res: any) => {
        if(res.status == 'success') {
            // 注册成功后直接发起登录请求，跳转至个人页面
            overallSe.getLoginByUserId(data).then((loginRes: any) => {
                if(loginRes.status == 'success') {
                    overallSe.setUserInfo(loginRes.results, loginRes.token)
                    router.push({ name: 'myInfo' })
                } else {
                    if(loginRes.errCode == 'ERR002') {
                        errorMessage.value = loginRes.errMessage
                        showErrorAlert.value.showErrorAlert()
                    }
                }
            })
        } else {
            errorMessage.value = res.errMessage
            showErrorAlert.value.showErrorAlert()
        }
    })
}
</script>

<style lang="less" scoped>
.userid-login {
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: var(--bg-color);

    .userid-login-top {
        width: 100%;
        height: var(--navigation-bar-height);
        line-height: var(--navigation-bar-height);
        border-bottom: 1px solid var(--border-color-gray);
        padding: 0 1.7rem;
        text-align: center;

        .ul-t-left {
            color: var(--font-color-blue);
            position: absolute;
        }

        .ul-t-center {
            color: var(--font-color-blue);
            font-weight: 600;
        }
    }

    .userid-login-content {
        width: 100%;
        min-height: calc(100% - 2.5rem);

        .ul-c-top {
            height: 21rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 0 3.7rem;

            .user_btn {
                margin-top: 1rem;
            }

            .ul-c-t-agreement{
                font-size: 14px;
                margin-top: 1rem;

                a {
                    color: var(--font-color-blue);
                }

                .ul-c-t_checkbox {
                    margin-right: 0.7rem;
                    vertical-align: middle;
                }
            }
            :deep(.el-input__wrapper) {
                box-shadow: none;
                background-color: var(--bg-color);
                .el-input__inner {
                    text-align: center;
                    font-size: 17px;
                    color: var(--font-color-black);
                }   
            }
        }
    }
}
</style>